import React, { Component } from 'react'


// class Footer extends Component {
//     state = {
//         name: '张三'
//     }
//     render(){
//         return (<>
//             <footer style={{backgroundColor: '#f66', height: 50}}> 页脚 </footer>
//         </>)
//     }
// }

// 一个高阶组件实际就是一个函数，将一个组件作为参数传递过来，然后返回一个新的组件
const withFooter = (Com)=>{

    class Footer extends Component {
        state = {
            name: '张三'
        }
        render(){
            return (<>
                <Com name={this.state.name} />
                <footer style={{backgroundColor: '#f66', height: 50}}> 页脚 </footer>
            </>)
        }
    }

    return Footer
}


const Page1 = withFooter((props)=>{
    return (<>
        <h1>Page1 -- {props.name}</h1>
    </>)
})

// @withFooter() 装饰器的写法，现在 create-react-app 已经故意不支持装饰器
let Page2 = (props)=>{
    return (<>
        <h1>Page2   --- {props.name}</h1>
    </>)
}
Page2 = withFooter(Page2)




export default class App extends Component {
  render() {
    return (
      <div>

            <Page1 />
            
            <hr />

            <Page2 />

      </div>
    )
  }
}
